<template>
<div class="wrapper">
<div class="icon"  v-for="item of iconList" :key="item.id">
<div class="icon-img">
    <img class="img" :src="item.imgUrl" :class="[item.color]" >
</div>
<div class="icon-desc">{{item.desc}}</div>
</div>


</div>

</template>

<script>
export default {
  name: 'homeCatalog',
  props:{
iconList:Array
  },
  data(){
      return{
          red:'red',
          green:'green',
          blue:'blue',
          orange:'orange',
         
      }
  }
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.wrapper
    background-color #ffffff
    padding-top:.2rem
    .icon
      float:left
      width:25%
      .img
        background:red
        display:block
        border-radius:1rem
        margin: 0 auto
        width:50px
        height:49px
      .red
        background:#fd6266
      .orange
        background:#fda424
      .green
        background:#6dcf16
      .blue
        background:#41a9f2
      .icon-desc
        text-align :center
        padding-top:.2rem

 

   

  
</style>
